<template>
  <div>
    <div id="centreLeft2Chart" style="width:4.125rem; height: 4.625rem;"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
import {mountBigDataClass} from "../../../http/api";

export default {
  data() {
    return {
      chart: null,
      className: [],
      classNum: []
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("centreLeft2Chart"));
      mountBigDataClass().then(res => {
        console.log(res.data.data)
        for (let key in res.data.data) {
          let color = ["#f54d4d", "#ffae00", "#dcff00", "#25d053", "#01fff5"]
          this.className.push(res.data.data[key].class_tag)
          this.classNum.push({
            value: res.data.data[key].num,
            itemStyle: {
              normal: {
                color: color[key]
              }
            }
          })
        }
        let option = {
          angleAxis: {
            interval: 1,
            type: "category",
            data: this.className,
            z: 10,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#00c7ff",
                width: 1,
                type: "solid"
              }
            },
            axisLabel: {
              interval: 0,
              show: true,
              color: "#00c7ff",
              margin: 8,
              fontSize: 12
            }
          },
          radiusAxis: {
            min: 0,
            max: 50,
            interval: 20,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#00c7ff",
                width: 1,
                type: "solid"
              }
            },
            axisLabel: {
              formatter: "{value} %",
              show: false,
              padding: [0, 0, 20, 0],
              color: "#00c7ff",
              fontSize: 16
            },
            splitLine: {
              lineStyle: {
                color: "#00c7ff",
                width: 1,
                type: "solid"
              }
            }
          },
          // legend: {
          //   show: true,
          //   orient: "vartical",
          //   top: "center",
          //   bottom: "0%",
          //   itemWidth: 16,
          //   itemHeight: 8,
          //   itemGap: 16,
          //   textStyle: {
          //     color: "#A3E2F4",
          //     fontSize: 12,
          //     fontWeight: 0
          //   },
          //   data: ["A"]
          // },
          polar: {},
          series: [
            {
              name: "A",
              type: "bar",
              radius: ["20%", "100%"],
              data: this.classNum,
              coordinateSystem: "polar"
            }
          ]
        };
        this.chart.setOption(option);
      })
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
</style>
